import './index.css';
import {mapState} from 'vuex';
import moment from 'moment';
import {textWidth, isJSON} from '@/utils/tools.js';
import _ from 'lodash';
import apisRegister from '@/api';
import microService from '@/micro-service';
import {isEmpty} from 'lodash/lang';
import draggable from 'vuedraggable';
import mockData from '@/views/business-o/stm/api/mockData';

const emptyImg = require('@/assets/common/empty.png')

const vxePage = {
  name: 'vxePage',
  inheritAttrs: false,
  components: {
    draggable
  },
  data() {
    return {
      config: {
        btnCfg: [],
        colCfg: [],
        customCfg: [],
        schCfg: [],
        tabCfg: []
      },
      searchAreaHeight: 0,
      queryFormInit: {},
      tableColumns: [],
      searchConditions: [],
      searchAreaShow: true,
      tableLoading: false,
      tableData: [],
      stateCountData: [],
      pagination: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      dateType: ['date', 'daterange', 'month', 'monthrange', 'year', 'yearrange','datetime'],
      dateFormat: {
        date: 'yyyy-MM-dd',
        daterange: 'yyyy-MM-dd',
        month: 'yyyy-MM',
        monthrange: 'yyyy-MM',
        year: 'yyyy',
        datetime:'yyyy-MM-dd hh:mm:ss'
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近两个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      showCfgDialog: false,
      // queryFrom初始化数组类型
      arrayType: ['multi-select', 'daterange', 'checkbox'],
      // 可修改配置项
      // 是否展示配置按钮 true-显示 false-隐藏
      showCfgButton: true,
      // 查询后自动收起 true-是 false-否
      searchAreaAutoFold: false,
      // 数据列宽度 true-预设 false-自适应
      tableFixColumns: true,
      // 表格高度 true-固定 false-自由
      tableFixHeight: true,
      // 表格模式 'checkbox'-多选 'radio'-单选
      tableMode: 'checkbox',
      // 查询条件区域高度是否自适应
      searchAreaHeightAuto: true,
      searchAreaCustomHeight: 0,
      activeName: '1',
      hasSelect:  false, // 是否需要查询码表
      resetForm: {}, // 重置默认值
      showStatus: false,
      clonetableColumns:[]
    }
  },
  props: {
    id: {
      type: String,
      required: true,
      default: ''
    },
    listPageConfig: {
      type: Object,
      required: false,
      default: () => {}
    },
    queryForm: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    },
    stateCountConfig: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    },
    validator: {
      type: Object,
      required: false,
      default: () => {
      }
    },
    optCode: {
      type: String,
      default: ''
    },
    handleQueryParamsFun: {
      type: Function,
      default: () => {}
    },
    hisColumns:{
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },
    hisCase:{type:Object,default: () => {}},
  },
  computed: {
    tableHeight: function () {
      const clientHeight = document.body.clientHeight
      const headerHeight = 56
      const mainContainerMargin = 10
      const tabsHeader = 32
      const viewsContainerPadding = 20
      const listPageButtonsHeight = 41 + 52
      const tablePagerHeight = 40
      const result = clientHeight - headerHeight - mainContainerMargin - tabsHeader - viewsContainerPadding - listPageButtonsHeight - tablePagerHeight - 27 - this.searchAreaHeight
      return result
    },
    getFormStyle: function () {
      if (this.searchAreaHeightAuto) {
        return {}
      } else {
        if (this.searchAreaShow) {
          return { height: (this.searchAreaCustomHeight === 0 ? this.searchAreaHeight : this.searchAreaCustomHeight) + 'px' }
        } else {
          return {}
        }
      }
    },
    ...mapState({
      language: state => state.base.language || 'zh_TW',
      btnData: state => state.base.btnData,
      userInfo: state => state.base.userInfo
    }),
  },
  created() {
    const self = this
    // 父组件配置覆盖默认配置
    if (self.listPageConfig) {
      if (self.listPageConfig.searchAreaAutoFold !== null && self.listPageConfig.searchAreaAutoFold !== undefined) {
        self.searchAreaAutoFold = self.listPageConfig.searchAreaAutoFold
      }
      if (self.listPageConfig.tableFixColumns !== null && self.listPageConfig.tableFixColumns !== undefined) {
        self.tableFixColumns = self.listPageConfig.tableFixColumns
      }
      if (self.listPageConfig.tableFixHeight !== null && self.listPageConfig.tableFixHeight !== undefined) {
        self.tableFixHeight = self.listPageConfig.tableFixHeight
      }
      if (self.listPageConfig.tableMode !== null && self.listPageConfig.tableMode !== undefined) {
        self.tableMode = self.listPageConfig.tableMode
      }
      if (self.listPageConfig.showCfgButton !== null && self.listPageConfig.showCfgButton !== undefined) {
        self.showCfgButton = self.listPageConfig.showCfgButton
      }

    }
  },
  mounted() {
    const self = this
    microService(apisRegister['_01_STM006GET003'], '', {
      optCode:'STM006GET003',
      payload: {
        pageId: self.id
      }
    }).then(res => {
      if (res?.respStatus === '00') {
        const config = res.payload
        self.hasSelect = false
        let tableColumns = _.filter(config.colCfg, cfg => cfg.hidden === 1) || []
        const searchConditions = _.filter(config.schCfg, cfg => cfg.hidden === 1) || []
        tableColumns.map(item => item.visible = true)
        searchConditions.map(item => {
          item.visible = true
          if (!isEmpty(item.para)) {
            item.para = JSON.parse(item.para)
            self.hasSelect = true
          } 
          item.opts = {
            'zh_TW': [],
            'en_US': [],
          }
          if (!self.queryForm[item.prop]) {
            if (self.arrayType.includes(item.type)) {
              self.$set(self.queryForm, item.prop, [])
              if (['checkbox', 'radio'].includes(item.type)) {
                self.$set(self.queryForm, item.prop + 'Values', [])
              }
            } else if (item.type === 'amlOrg') {
              let defaultValue = ''
              if (item.defaultValue && item.defaultValue.indexOf('$userInfo') > -1) {
                const prop = item.defaultValue.replace('$userInfo', '')
                defaultValue = self.userInfo[prop]
              } else {
                defaultValue = item.defaultValue ? item.defaultValue : ''
              }
              self.$set(self.queryForm, item.prop, defaultValue)
              self.$set(self.queryForm, item.desc, false)
            } else {
              let defaultValue
              if (item.defaultValue && item.defaultValue.indexOf('$userInfo') > -1) {
                const prop = item.defaultValue.replace('$userInfo.', '')
                defaultValue = self.userInfo[prop]
              } else {
                defaultValue = item.defaultValue ? item.defaultValue : ''
              }
              self.$set(self.queryForm, item.prop, defaultValue)
            }
          }
            console.log(searchConditions,tableColumns,item.rule, '打印vxpage里面的item.rule');
          if (isJSON(item.rule)) {
            const _rule = !isEmpty(item.rule) ? JSON.parse(item.rule) : []
            console.log(_rule, this.validator, '打印vxpage里面的this.validator');

            _rule.forEach(item => {
              if (item?.validator) {
                item.validator = this.validator[item.validator]
              }
              if (item?.message) {
                item.message = this.$t(item.message)
              }
            })
            item.rule = _rule
          } else {
            item.rule = []
          }
        })
        this.resetForm = _.cloneDeep(this.queryForm)
        if (self.listPageConfig.showCfgButton !== null && self.listPageConfig.showCfgButton !== undefined) {
          self.showCfgButton = self.listPageConfig.showCfgButton
        } else {
          self.showCfgButton = config.tabCfg.pageCfg !== '0'
        }
        // 合并自定义配置
        if (config.customCfg.length > 0 && config.tabCfg.pageCfg === '1') {
          _.forEach(config.customCfg, cfg => {
            if (cfg.cfgTp === 'AF') {
              self.$set(self, 'searchAreaAutoFold', cfg.cfgChk === 'true')
            }
            if (cfg.cfgTp === 'MS') {
              self.$set(self, 'tableMode', cfg.cfgChk)
            }
            if (cfg.cfgTp === 'COND') {
              const condition = _.find(searchConditions, cond => cond.prop === cfg.cfgId)
              if(condition){
                condition.visible = cfg.cfgChk === 'true'
                condition.seq = cfg.cfgSeq
              }
          
            }
            if (cfg.cfgTp === 'COL') {
              const column = _.find(tableColumns, col => col.prop === cfg.cfgId)
              if(column){
                column.visible = cfg.cfgChk === 'true'
                column.seq = cfg.cfgSeq
                column.width = cfg.cfgWidth
              }
           
            }
            if (cfg.cfgTp === 'COLAUTO') {
              self.$set(self, 'tableFixColumns', cfg.cfgChk === 'true')
            }
            if (cfg.cfgTp === 'COLHEIGHT') {
              self.$set(self, 'tableFixHeight', cfg.cfgChk === 'true')
            }
            if (cfg.cfgTp === 'CONDHEADAUTO') {
              self.$set(self, 'searchAreaHeightAuto', cfg.cfgChk === 'true')
            }
            if (cfg.cfgTp === 'CONDHHEIGHT') {
              self.$set(self, 'searchAreaCustomHeight', parseInt(cfg.cfgChk))
            }
          })
        }
        const ascCompareFunc = (a, b) => parseInt(a.seq) - parseInt(b.seq)
        const sortedConditions = searchConditions.slice().sort(ascCompareFunc)
        const sortedColumns = tableColumns.slice().sort(ascCompareFunc)
        self.$set(self, 'config', config)        
        self.$set(self, 'tableColumns', sortedColumns)
        self.$set(self, 'clonetableColumns', sortedColumns)

        self.$set(self, 'searchConditions', sortedConditions)
        self.$forceUpdate()
      }
    }).finally(() => {
      self.loading = false
      self.hasSelect && self.$store.dispatch('base/getCodeTables', self.searchConditions).finally(() => {
        self.pageLoading = false
      })
    })
    self.$erd.listenTo(document.querySelector('.list-page-search'), ele => {
      if (self.searchAreaShow) {
        self.searchAreaHeight = ele.clientHeight
      } else {
        self.searchAreaHeight = 0
      }
      if (self.searchAreaCustomHeight === 0) {
        self.searchAreaCustomHeight = ele.clientHeight
      }
    })
  },
  watch: {
    tableMode: function (n, o) {
      const self = this
      self.$nextTick(function () {
        if (n === 'checkbox') {
          self.$refs[`main-table--${self.id}`].showColumn('checkbox-column')
          self.$refs[`main-table--${self.id}`].clearRadioRow()
        } else {
          self.$refs[`main-table--${self.id}`].hideColumn('checkbox-column')
          self.$refs[`main-table--${self.id}`].clearCheckboxRow()
        }
      })
    },
    tableFixColumns: function () {
      this.$refs[`main-table--${this.id}`].refreshColumn()
    },
    tableColumns: {
      handler: function () {
        this.$refs[`main-table--${this.id}`].refreshColumn()
      },
      deep: true,
      immediate: false
    },
    language(){
      this.tableData = []
    }
  },
  methods: {
    handleInput (cfg, value) {
      if (this.dateType.includes(cfg.type)) {
        let dateValue = undefined
        if (cfg.type === 'daterange' || cfg.type === 'monthrange') {
          dateValue = []
          _.forEach(value, t => {
            if (t !== null) {
              dateValue.push(moment(t).format(this.dateFormat[cfg.type].toUpperCase()))
            }
          })
        } else {
          dateValue = value === ''? '' : moment(value).format(this.dateFormat[cfg.type].toUpperCase())
        
        }
        this.$set(this.queryForm, cfg.prop, dateValue)
      } else if (['checkbox', 'radio'].includes(cfg.type)) {
        this.$set(this.queryForm, cfg.prop + 'Values', value)
        const keyValue = _.map(_.filter(cfg.opts[this.language], opt => value.includes(opt.value)), 'key')
        this.$set(this.queryForm, cfg.prop, keyValue)
      } else {
        this.$set(this.queryForm, cfg.prop, value)
      }
    },
    removeSpace(cfg) {
      this.queryForm[cfg.prop] = this.queryForm[cfg.prop].trim()
    },
    handleClickSearchArea() {
      this.searchAreaShow = !this.searchAreaShow
    },
    doSearch: _.debounce(function (str) {
      const self = this
      if(str === 'pageOne'){
        self.handlePageChange({pageSize: this.pagination.pageSize, currentPage: 1})
        return
      }
      // 校验
      let validFlag = true
      self.$refs[`main-form--${self.id}`].validate((valid) => {
        validFlag = valid
      });
      if (!validFlag) {
        return
      }
      // 折叠
      if (self.searchAreaAutoFold) {
        this.searchAreaShow = false
      }
      return new Promise((resolve, reject) => {
        let params = {
          'optCode': this.optCode,
          'pageInfo': {
            ...self.pagination
          }
        }
        if (self.config.tabCfg.needPayload === '1') {
          params = {
            ...params,
            'payload': {
              ...self.queryForm
            }
          }
        }else{
          params = {
            'optCode': this.optCode,
            'pageInfo': {
              ...self.pagination
            },
            ...self.queryForm
          }
        }
        if(this.handleQueryParamsFun) {
          this.handleQueryParamsFun(params);
        }
        this.tableLoading = true

        params.optCode==='STM004GET1111'&&this.getHisColumns(params.payload.bankId)
        microService(apisRegister[self.config.tabCfg['interface']], '', params).then(res => {
          if (res) {
            // 如果查询结果集与当前页面pageInfo不匹配则重新
            const data = _.result(res, self.config.tabCfg.resultEntity)
            self.pagination.total = res?.pageInfo?.total ?? 0
            if (self.pagination.total !== 0 && self.autoContract ) {
              // 查询出结果 隐藏查询框
              self.btnDirection = 'down'
              self.$refs['listCondition'].listFormShow = this.btnDirection === 'up'
            }
            if (this.pagination.total !== 0 && this.autoSequence) {
              // 增加自定义序号
              _.forEach(data, (row, index) => {
                row.__outerSeq = (self.pageInfo.pageNo - 1) * self.pageInfo.pageSize + index + 1
              })
            }
            self.tableData = data
            if (self.stateCountConfig?.dataLocation) {
              const data = _.result(res, self.stateCountConfig?.dataLocation)
              self.stateCountData = data
            }
            self.showStatus = true
            // self.initTableInnerSeq()
            // this.originData = _.cloneDeep(this.data)
          } else {
            self.tableData = []
            self.originData = []
            self.pagination.total = 0
          }
          self.selectedRows = []
          resolve(self.tableData)
        }).catch(err => {
          reject(err)
        }).finally(() => {
          this.tableLoading = false
          if (this.pagination.total === 0) {
            this.emptyTip = 'listPage.no-record'
          }
        })
      })
    }, 300) ,
    getHisColumns(bankId){
      this.$p2svr(this.$api['_01_STM004GET1100'], '', {
        optCode: 'STM004GET1110',
        payload: {
          caseType:'trade',
          bankId,
          caseId:'3',
          chooseType:'1',
          columnType:'1'
          
        },
        pageInfo: { pageNo: 1, pageSize: 20 }
      }).then(res=>{
      
    
        if(res&& res.payload&&res.payload.length>0){
          const payload=res.payload
          let columns=[]
          payload.map(item=>{
            let column = _.find(this.clonetableColumns, col => col.prop === item.field)
            if(column){
              columns.push(column)
            }
          })
          this.$set(this, 'tableColumns', columns)

        }else{
          console.log(this.hisColumns,'=====this.hisColumns')
          let columns=[]
          this.hisColumns.map(item=>{
            let column = _.find(this.clonetableColumns, col => col.prop === item.field)
            if(column){
              columns.push(column)
            }
          })
         

          this.$set(this, 'tableColumns', columns)
        }
      })
    },
    clearForm() {
      const self = this
      self.$refs[`main-form--${self.id}`].resetFields()
      for(let item in this.resetForm){
        this.$set(this.queryForm, item, this.resetForm[item])
      }
      this.$set(self.queryForm, self.stateCountConfig.targetProp, '')
      self.$emit('clearForm')
    },
    getSelectedRows() {
      const self = this
      let selectedRows = []
      if (self.tableMode === 'checkbox') {
        if(self.$refs[`main-table--${self.id}`]){
          selectedRows = self.$refs[`main-table--${self.id}`].getCheckboxRecords()
        }
      }
      if (self.tableMode === 'radio') {
        if(self.$refs[`main-table--${self.id}`]){
          let selectedRow = self.$refs[`main-table--${self.id}`].getRadioRecord()
          if (selectedRow !== null) {
            selectedRows.push(selectedRow)
          }
        }
      }
      return selectedRows
    },
    handleClickOperateButton(btn) {
      const self = this
      self.$emit(btn.method, {rows: self.getSelectedRows(), btn})
    },
    handlePageChange: _.debounce(function(pageInfo) {
      const self = this
      self.pagination.pageNo = pageInfo.currentPage
      self.pagination.pageSize = pageInfo.pageSize
      return self.doSearch()
    }, 300),
    handleCustomConfig (cfg) {
      this.$set(this, cfg.prop, cfg.value)
    },
    handleColumnCheckboxChange(col, checked, env) {
      const self = this
      self.$set(col, 'visible', checked)
      if (checked) {
        self.$refs[`main-table--${self.id}`].showColumn(col.prop)
      } else {
        self.$refs[`main-table--${self.id}`].hideColumn(col.prop)
      }
    },
    handleStateTag(cfg) {
      const self = this
      self.$set(self.queryForm, self.stateCountConfig.targetProp, cfg.status)
      self.doSearch('pageOne')
    },
    handleChangeProp (prop, value) {
      this[prop] = value
    },
    handleColChange (col, prop ,e) {
      let val = e
      if (e instanceof Event) {
        val = e.target.value
      }
      this.$set(col, prop, val)
    },
    handleSaveConfig () {
      microService(apisRegister['_01_STM006MOD001'], '', {
        payload: {
          pageId: this.id,
          AF: this.searchAreaAutoFold,
          MS: this.tableMode,
          COND: this.searchConditions,
          CONDHEADAUTO: this.searchAreaHeightAuto,
          CONDHHEIGHT: this.searchAreaCustomHeight,
          COL: this.tableColumns,
          COLAUTO: this.tableFixColumns,
          COLHEIGHT: this.tableFixHeight,
        }
      }).then(res => {
        if (res && res.respStatus === '00') {
          this.$message.success('保存成功！')
          this.showCfgDialog = false
        }
      })
    },
  },
  render() {
    const self = this

    const validateHeadOffice = (cfg) => {
      const headOfficeFlag = !!cfg.type.split(':')[1]
      if (headOfficeFlag) {
        return self.userInfo.blngInstNo !== '003' && self.userInfo.blngInstNo !== '3'
      } else {
        return false
      }
    }
    const renderFrom = () => {
      return <bfe-form
        ref={`main-form--${self.id}`}
        size={'mini'}
        label-position={'top'}
        label-width={'80px'}
        props={{model: self.queryForm}}
        inline
        style={self.searchAreaShow ? '' : 'display: none'}
      >
        {
          self.$scopedSlots['customSearch'] ? self.$scopedSlots['customSearch']() : function(){
            return renderFormItem()
          }()
        }
      </bfe-form>
    }
    const renderFormItem = () => {
      return self.searchConditions.map(cfg => {
        if (cfg.visible) {
          if (_.isEmpty(cfg.slot)) {
            const type = cfg.type.split(':')[0]
            if (type === 'input') {
              return renderFormItemInput(cfg)
            }
            if (type === 'select') {
              return renderFormItemSelect(cfg)
            }
            if (type === 'multi-select') {
              return renderFormItemMultiSelect(cfg)
            }
            if (self.dateType.includes(type)) {
              return renderFormItemDate(cfg)
            }
            if (type === 'checkbox') {
              return renderFormItemCheckBox(cfg)
            }
            if (type === 'radio') {
              return renderFormItemRadio(cfg)
            }
            if (type === 'number') {
              return renderFormItemNumber(cfg)
            }
          } else {
            return self.$scopedSlots[`cond_${cfg.slot}`]({cfg: cfg}) || null
          }
        }
      })
    }
    const renderFormItemInput = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null}>
        <bfe-input value={self.queryForm[cfg.prop]} style={'width: 210px'} size={'small'} on={{'input': self.handleInput.bind(self, cfg), 'blur': self.removeSpace.bind(self, cfg)}} disabled={validateHeadOffice(cfg)}></bfe-input>
      </bfe-form-item>
    }
    const renderFormItemSelect = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null} >
        <bfe-select
          value={self.queryForm[cfg.prop]}
          size={'small'}
          style={'width: 210px'}
          on={{'input': self.handleInput.bind(self, cfg)}}
          clearable
          filterable
          placeholder={''}
          disabled={validateHeadOffice(cfg)}
        >
          {
            cfg.opts[self.language].map((item, index) => {
              return <bfe-option key={item.key + index} label={cfg.prop.withKey ? `${item.key}-${item.value}` : item.value} value={item.key}></bfe-option>
            })
          }
        </bfe-select>
      </bfe-form-item>
    }
    const renderFormItemMultiSelect = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null}>
        <bfe-select
          value={self.queryForm[cfg.prop]}
          size={'small'}
          style={'width: 430px'}
          on={{'input': self.handleInput.bind(self, cfg)}}
          clearable
          filterable
          multiple
          disabled={validateHeadOffice(cfg)}
        >
          {
            cfg.opts[self.language].map(item => {
              return <bfe-option key={item.key} label={cfg.prop.withKey ? `${item.key}-${item.value}` : item.value} value={item.key}></bfe-option>
            })
          }
        </bfe-select>
      </bfe-form-item>
    }
    const renderFormItemDate = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null}>
        <bfe-date-picker
          value={self.queryForm[cfg.prop]}
          type={cfg.type}
          format={self.dateFormat[cfg.type]}
          size={'small'}
          show-header={true}
          picker-options={(cfg.type === 'daterange' || cfg.type === 'monthrange') ? self.pickerOptions : null}
          editable={true}
          clearable
          quick-select-mode={'select'}
          on={{'input': self.handleInput.bind(self, cfg)}}
          style={'width: 210px'}
          placeholder={''}
          disabled={validateHeadOffice(cfg)}
        />
      </bfe-form-item>
    }
    const renderFormItemCheckBox = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null}>
        <bfe-checkbox-group value={self.queryForm[cfg.prop + 'Values']} style={'width: 210px'} on={{'input': self.handleInput.bind(self, cfg)}} disabled={validateHeadOffice(cfg)}>
          {
            cfg.opts[self.language].map(item => {
              return <bfe-checkbox key={item.key} label={item.value}></bfe-checkbox>
            })
          }
        </bfe-checkbox-group>
      </bfe-form-item>
    }
    const renderFormItemRadio = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null}>
        <bfe-radio-group value={self.queryForm[cfg.prop + 'Values']} style={'width: 210px'} on={{'input': self.handleInput.bind(self, cfg)}} disabled={validateHeadOffice(cfg)}>
          {
            cfg.opts[self.language].map(item => {
              return <bfe-radio key={item.key} label={item.value}></bfe-radio>
            })
          }
        </bfe-radio-group>
      </bfe-form-item>
    }
    const renderFormItemNumber = (cfg) => {
      return <bfe-form-item label={self.$t(cfg.label)} key={cfg.prop} prop={cfg.prop} rules={cfg.rule || null}>
        <bfe-input-number
          value={self.queryForm[cfg.prop]}
          style={'width: 210px'}
          size={'small'}
          on={{'input': self.handleInput.bind(self, cfg)}}
          editable={true}
          disabled={validateHeadOffice(cfg)}
        ></bfe-input-number>
      </bfe-form-item>
    }
    const renderTableColumns = (tableColumns) => {
      return tableColumns.map(col => {
        if (col.visible) {
          if (!col.parentProp) {
            if (!col.slot) {
              if (!col.isParent) {
                return <vxe-column
                  field={col.prop}
                  fixed={col.fixed}
                  title={self.$t(col.label)}
                  min-width={self.tableFixColumns ? col.width : textWidth(self.$t(col.label)) + 50}
                  sortable
                ></vxe-column>
              } else {
                const innerColumns = self.tableColumns.filter(tc => tc.parentProp === col.prop)
                return renderTableInnerColumns(col, innerColumns)
              }
            } else {
              return self.$scopedSlots[`col_${col.slot}`] ? self.$scopedSlots[`col_${col.slot}`]({col: col}) : undefined
            }
          }
        }
      })
    }
    const renderTableInnerColumns = (groupColumn, innerColumns) => {
      return <vxe-colgroup
        field={groupColumn.prop}
        title={self.$t(groupColumn.label)}
        sortable
      >
        {
          innerColumns.map(col => {
            if (!col.isParent) {
              return <vxe-column
                field={col.prop}
                title={self.$t(col.label)}
                width={self.tableFixColumns ? col.width : textWidth(self.$t(col.label)) + 50}
                sortable
              ></vxe-column>
            } else {
              const ics = self.tableColumns.filter(tc => tc.parentProp === col.prop)
              return renderTableInnerColumns(col, ics)
            }
          })
        }
      </vxe-colgroup>
    }
    const renderPager = () => {
      return (
        <vxe-pager
          border
          size={'small'}
          loading={self.tableLoading}
          layouts={['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']}
          total={self.pagination.total}
          current-page={self.pagination.pageNo}
          page-size={self.pagination.pageSize}
          page-sizes={[20, 50, 100, 300]}
          on={{'page-change': self.handlePageChange.bind(self)}}
        />
      )
    }
    const renderTable = () => {
      if (!self.$scopedSlots['customTable']) {
        return <div>
          <vxe-table
            resizable
            border
            height={self.tableFixHeight ? self.tableHeight + 'px' : undefined}
            scroll-y={{enabled: self.tableFixHeight}}
            loading={self.tableLoading}
            size={'mini'}
            show-overflow
            show-header-overflow
            class={'list-page-vxeTable'}
            ref={`main-table--${self.id}`}
            checkbox-config={ self.tableMode === 'checkbox' ? {trigger: 'row', highlight: true} : undefined }
            radio-config={ self.tableMode === 'radio' ? {trigger: 'row', highlight: true} : undefined }
            {...{on: self.$listeners}}
            {...{attrs: self.$attrs}}
            data={self.tableData}
          >
            <vxe-column field={ 'checkbox-column' } type={ 'checkbox' } width={ 36 } fixed={'left'}></vxe-column>
            {renderTableColumns(self.tableColumns)}
            <template slot={'empty'}>
              <img src={emptyImg} alt={'暂无数据'}/>
              <div style={'color:rgba(0,0,0,0.65)'}>請輸入查詢條件，進行查詢</div>
            </template>
          </vxe-table>
          <div>{renderPager()}</div>
        </div>
      }else {
        return <div>
          {self.$scopedSlots['customTable'] ? self.$scopedSlots['customTable']({height: self.tableHeight + 40 + 'px'}) : null}
        </div>
      }
    }
    const renderSearchBtn = () => {
      return (
        <div>
          <div class={'parent-layout'}>
            <div class={'child-right'} style={{'opacity': self.showStatus ? 1 : 0}}>
              { renderSearchLeftArea() }
            </div>
            <div class={'child-left'}>
              {self.$scopedSlots['buttonGroup'] ? self.$scopedSlots['buttonGroup']() : null}
              <bfe-button icon={'close'} on={{click: self.clearForm.bind(self)}}>{self.$t('common.reset')}</bfe-button>
              {
                self.searchAreaShow
                  ?
                  <bfe-button style={'padding-left: 16px'} type={'text'} icon={'arrow-up'} on={{click: self.handleClickSearchArea.bind(self)}}>{self.$t('common.down')}</bfe-button>
                  :
                  <bfe-button style={'padding-left: 16px'} type={'text'} icon={'arrow-down'} on={{click: self.handleClickSearchArea.bind(self)}}>{self.$t('common.up')}</bfe-button>
              }
            </div>
          </div>
          <bfe-divider></bfe-divider>
        </div>
      )
    }
    const renderSearchLeftArea = () => {
      if (self.stateCountConfig?.dataLocation) {
        return self.stateCountConfig.itemConfig.map(state => {
          return <bfe-tag style={{'margin-right': '15px', 'cursor': 'pointer', 'background': self.queryForm[self.stateCountConfig.targetProp] === state.status ? '#d21f3e' : '', 'color': self.queryForm[self.stateCountConfig.targetProp] === state.status ? '#fff' : '', 'border-color': self.queryForm[self.stateCountConfig.targetProp] === state.status ? '#bf1f44' : ''}} type={state.type} hit close-transition on={{click: self.handleStateTag.bind(self, state)}}>
            {self.$t(state.name)}: {self.stateCountData[state.status] ? self.stateCountData[state.status] : 0}
          </bfe-tag>
        })
      }
    }
    const renderOperateButtons = () => {
      return <div class={'parent-layout'}>
        <div class={'child-left'} style={'display: flex;'}>
          { renderOperateButtonsByPosition('left') }
        </div>
        <div class={'child-right'} style={'display: flex;'}>
          <div>
            { renderOperateButtonsByPosition('right') }
          </div>
          <div>
            { renderOperateCfgButton() }
          </div>
        </div>
      </div>
    }
    const renderOperateButtonsByPosition = (position) => {
      let totalButtons = self.config.btnCfg.filter( btnCfg => (self.btnData.some( btn => btn.btnRefno === btnCfg.authNo)) || (btnCfg.authNo === null));
      // 增加待办任务复核按钮
      if(!self.btnData.find(item => (item.menuRefno === '0001.A129.0379' && item.btnRefno === '0001.A129.0379.0001'))) {
        self.btnData.push({
          btnName: '復核',
          btnRefno: '0001.A129.0379.0001',
          langCode: 'zh_TW',
          menuRefno: '0001.A129.0379',
        })
      }
      if(!self.btnData.find(item => (item.menuRefno === '0001.A129.0014' && item.btnRefno === '0001.A129.0014.0001'))) {
        self.btnData.push({
          btnName: '客戶甄別',
          btnRefno: '0001.A129.0014.0001',
          langCode: 'zh_TW',
          menuRefno: '0001.A129.0014',
        })
      }

      if(this.hisCase==='hisCase'){
        totalButtons=totalButtons.filter(btnCfg=>btnCfg.btnId==='003'||btnCfg.btnId==='001')
      }
      const leftButtons = _.filter(totalButtons, btn => btn.position === position)

      const btnGroup = _.groupBy(leftButtons, 'group')
      return Object.keys(btnGroup).map((key, index) => {
        if (index !== 0) {
          return (
            <div style={'display: flex; justify-content: flex-start'}>
              <bfe-divider direction="vertical" style={'margin-top: 15px'}></bfe-divider>
              <div style={'display: flex; justify-content: flex-end'}>
                {renderOperateButtonsInner(btnGroup[key])}
              </div>
            </div>
          )
        } else {
          return (
            <div style={'display: flex; justify-content: flex-start'}>
              <div style={'display: flex; justify-content: flex-end'}>
                {renderOperateButtonsInner(btnGroup[key])}
              </div>
            </div>
          )
        }
      })
    }
    const renderOperateButtonsInner = (group) => {
      return group.map(btn => {
        if (btn.icon) {
          return (
            <a-spin spinning={btn.loading || false}>
              <div style={'margin: 0 24px 0 0; text-align: center;cursor: pointer'} on={{'click': self.handleClickOperateButton.bind(self, btn)}}>
                <svg-icon icon-class={btn.icon} style={'width: 28px; height: 28px;'}></svg-icon>
                <div style={'font-size: 12px; color: rgba(0,0,0,0.8); padding-top: 6px'}>{self.$t(btn.label)}</div>
              </div>
            </a-spin>
          )
        } else {
          return (
            <a-spin spinning={btn.loading || false}>
              <div style={'margin: 0 16px; text-align: center;cursor: pointer'} on={{'click': self.handleClickOperateButton.bind(self, btn)}}>
                <div style={'font-size: 12px; color: rgba(0,0,0,0.8); padding-top: 6px'}>{self.$t(btn.label)}</div>
              </div>
            </a-spin>
          )
        }
      })
    }
    const renderOperateCfgButton = () => {
      if(self.showCfgButton){
        return (
          <div style={'margin: 0 16px;'} on={{ 'click': self.handleCustomConfig.bind(self, { prop: 'showCfgDialog', value: true }) }}>
            <bfe-icon name={'ios-settings-strong'}
              style={'float: right;margin-top: 12px;margin-right: 8px;cursor: pointer'}
              size={'28'}
              color={'rgb(182, 0, 42)'}
            >
            </bfe-icon>
          </div>
        )
      }
    }
    const renderOperateDialog = () => {
      return <bfe-dialog
        title={'自定义配置'}
        visible={self.showCfgDialog}
        custom-class={'vxe-page-custom-config-dialog'}
        on={{ close: self.handleChangeProp.bind(self, 'showCfgDialog', false) }}
      >
        <bfe-collapse v-model={self.activeName} accordion>
          <bfe-collapse-item title={'查询条件配置'} name="1">
            <div>
              查询后自动收起：
              <bfe-radio-group v-model={self.searchAreaAutoFold} size={'small'}>
                <bfe-radio label={true}>是</bfe-radio>
                <bfe-radio label={false}>否</bfe-radio>
              </bfe-radio-group>
            </div>
            <bfe-divider></bfe-divider>
            <div>
              查询条件自适应高度：
              <bfe-radio-group v-model={self.searchAreaHeightAuto} size={'small'}>
                <bfe-radio label={true}>是</bfe-radio>
                <bfe-radio label={false}>否</bfe-radio>
              </bfe-radio-group>
              <bfe-slider value={self.searchAreaCustomHeight} disabled={self.searchAreaHeightAuto} max={500} step={10}
                on={{'input': self.handleColChange.bind(self, self, 'searchAreaCustomHeight')}}
                style={'float: right; width: 40%; margin-left: auto; margin-top: -5px;'}
              ></bfe-slider>
            </div>
            <bfe-divider></bfe-divider>
            <div>查询条件配置：</div>
            <div>
              <draggable
                v-model={self.searchConditions}
                handle={'.mover'}
                animation={'300'}
                scroll={true}
              >
                {
                  self.searchConditions.map(col => {
                    return<div style={'display: flex'}>
                      <span class={'mover'} style={ 'margin-top: -5px; padding-right: 10px' }>
                        <bfe-icon name={'android-more-vertical'} size={'20'} style={'margin-top: 8px;'}></bfe-icon>
                        <bfe-icon name={'android-more-vertical'} size={'20'} style={'margin-top: 8px;padding-left: 2px'}></bfe-icon>
                      </span>
                      { renderOperateDialogCondByRule(col) }
                    </div>
                  })
                }
              </draggable>
            </div>
          </bfe-collapse-item>
          <bfe-collapse-item title={'查询结果配置'} name="2">
            <div>
              表格选择配置：
              <bfe-radio-group v-model={self.tableMode} size={'small'}>
                <bfe-radio label={'radio'}>单选</bfe-radio>
                <bfe-radio label={'checkbox'}>多选</bfe-radio>
              </bfe-radio-group>
            </div>
            <bfe-divider></bfe-divider>
            <div>
              表格高度配置：
              <bfe-radio-group v-model={self.tableFixHeight} size={'small'}>
                <bfe-radio label={true}>固定</bfe-radio>
                <bfe-radio label={false}>自由</bfe-radio>
              </bfe-radio-group>
            </div>
            <bfe-divider></bfe-divider>
            <div>
              表格列宽度配置：
              <bfe-radio-group v-model={self.tableFixColumns} size={'small'}>
                <bfe-radio label={true}>预设</bfe-radio>
                <bfe-radio label={false}>自适应</bfe-radio>
              </bfe-radio-group>
            </div>
            <bfe-divider></bfe-divider>
            <div>查询结果配置：</div>
            <div>
              <draggable
                v-model={self.tableColumns}
                handle={'.mover'}
                animation={'300'}
                scroll={true}
              >
                {
                  self.tableColumns.map(col => {
                    return<div style={'display: flex'}>
                      <span class={'mover'} style={ 'margin-top: -5px; padding-right: 10px' }>
                        <bfe-icon name={'android-more-vertical'} size={'20'} style={'margin-top: 8px;'}></bfe-icon>
                        <bfe-icon name={'android-more-vertical'} size={'20'} style={'margin-top: 8px;padding-left: 2px'}></bfe-icon>
                      </span>
                      <bfe-checkbox
                        style={'padding-right: 5px'}
                        v-model={col.visible}
                        size={'small'}>
                      </bfe-checkbox>
                      <span style={'font-weight: bold'}>{self.$t(col.label)}</span>
                      <bfe-slider value={col.width} disabled={!self.tableFixColumns} max={500} step={10}
                        on={{'input': self.handleColChange.bind(self, col, 'width')}}
                        style={'float: right; width: 40%; margin-left: auto; margin-top: -5px;'}
                      ></bfe-slider>
                    </div>
                  })
                }
              </draggable>
            </div>
          </bfe-collapse-item>
        </bfe-collapse>
        <div slot="footer" class="dialog-footer">
          <bfe-button on={{click: self.handleChangeProp.bind(self, 'showCfgDialog', false)}}>取 消</bfe-button>
          <bfe-button type="primary" on={{click: self.handleSaveConfig.bind(self)}}>保存</bfe-button>
        </div>
      </bfe-dialog>
    }
    const renderOperateDialogCondByRule = (col) => {
      if (col.rule && _.filter(col.rule, r => r.required === true).length > 0) {
        return <span>
          <span class="required-icon" style="padding-left: 2px; font-weight: bold"></span>
          <span style="padding-left: 4px; font-weight: bold;">{ self.$t(col.label) }</span>
        </span>
      } else {
        return <span>
          <bfe-checkbox
            style={'padding-right: 5px'}
            v-model={col.visible}
            size={'small'}>
          </bfe-checkbox>
          <span style={'font-weight: bold'}>{self.$t(col.label)}</span>
        </span>
      }
    }

    return (
      <div class={'list-page-container'}>
        <div class={'list-page-search'} style={ self.getFormStyle }>
          {renderFrom()}
        </div>
        <div class={'list-page-search-buttons'}>
          {renderSearchBtn()}
        </div>
        <div class={'list-page-operate-buttons'}>
          {renderOperateButtons()}
        </div>
        <div class={'list-page-table'}>
          {renderTable()}
        </div>
        { renderOperateDialog() }
      </div>
    )
  }
}

export default vxePage